<template>
	<view class="user">
		<js-navbar title="我的"></js-navbar>

		<view class="tbox">
			<view class="user-box" @click="toNav(`user/info`)">
				<view class="avatar">
					<image v-if="!!info.user_image" :src="info.user_image"></image>
					<image v-else src="@/static/images/avatar.png" mode="aspectFit"></image>
				</view>
				<view class="info">
					<text>{{ info.name || '点击登陆' }}</text>
					<!-- <text>爱美的小康康，喜欢购物</text> -->
					<text>{{ info.level }}</text>
				</view>
			</view>

			<view class="vip-box">
				<view class="vip-card">
					<view class="lbox">
						<image src="@/static/images/qrzs.png" mode="aspectFit"></image>
						<text v-if="info.level == '普通用户'">开通会员，享受更高福利</text>
						<text v-else>您已是平台会员，享受专属会员价格</text>
					</view>
					<button @click="toNav(`vipCenter/vipCenter`)">{{ info.level == '普通用户' ? '了解更多' : '了解更多' }}</button>
				</view>
			</view>
		</view>

		<view class="container">
			<view class="twomenu">
				<view class="item" @click="toNav(`jifenshangcheng/myjifen`)">
					<view class="textbox">
						<text>积分中心</text>
						<text>积分兑换丰富好礼</text>
					</view>
					<image src="@/static/images/xx.png" mode="aspectFit"></image>
				</view>
				<view class="item" @click="toNav(`jifenshangcheng/jifenshangcheng`)">
					<view class="textbox">
						<text>积分商城</text>
						<text>积分也能当钱花</text>
					</view>
					<image src="@/static/images/sc.png" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 新增鞋服豆 -->
			<view class="twomenu">
				<view class="item" @click="toNav(`jifenshangchengXieFuDou/myjifen`)">
					<view class="textbox">
						<text>鞋服豆中心</text>
						<text>鞋服豆兑换丰富好礼</text>
					</view>
					<image src="@/static/images/xfd02.png" mode="aspectFit"></image>
				</view>
				<view class="item" @click="toNav(`jifenshangchengXieFuDou/jifenshangcheng`)">
					<view class="textbox">
						<text>鞋服豆商城</text>
						<text>鞋服豆也能当钱花</text>
					</view>
					<image src="@/static/images/xfd01.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="card card-1">
				<view class="head">
					<text>我的订单</text>
					<view class="right" @click="toNav(`order/order?current=${0}`)">
						<text>全部</text>
						<image src="@/static/images/right.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="content">
					<u-grid col="5" :border="false">
						<u-grid-item @click="citem(index, item)" v-if="item.column === 1" v-for="(item, index) in list" :key="index">
							<view class="grid-item-box">
								<u-badge :absolute="true" shape="horn" :offset="[0, 10]" max="99" :value="item.number"></u-badge>
								<image :src="item.img" mode="aspectFit"></image>
								<text class="text">{{ item.text }}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view class="card card-1" v-if="info.level == '会员用户' || info.name == '家硕'">
				<view class="head">
					<text>我的团队</text>
				</view>
				<view class="content">
					<u-grid col="5" :border="false">
						<u-grid-item v-if="item.column === 3" @click="citem(index, item)" v-for="(item, index) in list" :key="index">
							<view class="grid-item-box">
								<image :src="item.img" mode="aspectFit"></image>
								<text class="text">{{ item.text }}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<view class="card card-1">
				<view class="content">
					<u-grid col="4" :border="false">
						<u-grid-item v-if="item.column === 2" @click="citem(index, item)" v-for="(item, index) in list" :key="index">
							<view class="grid-item-box">
								<u-badge :absolute="true" shape="horn" :offset="[0, 10]" max="99" :value="item.number"></u-badge>
								<image :src="item.img" mode="aspectFit"></image>
								<text class="text">{{ item.text }}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<!-- <gzpop ref="pop" :show="showgz" @close="showgz = false"></gzpop> -->

		<kefupop :show="showKeFu" @close="showKeFu = false"></kefupop>
	</view>
</template>

<script>
import API from '@/common/api';
import { get_userInfo } from '@/common/common_fun.js';
import { mapState } from 'vuex';
export default {
	name: 'user',
	data() {
		return {
			info: {},
			showKeFu: false,
			showgz: false,
			list: [
				// 我的订单
				{
					column: 1,
					text: '待付款',
					key: 'order_need_pay',
					img: `/static/images/user-1.png`,
					path: `order/order?current=${1}`,
					number: 0
				},
				{
					column: 1,
					text: '待发货',
					key: 'order_need_delivery',
					img: `/static/images/user-2.png`,
					path: `order/order?current=${2}`,
					number: 0
				},
				{
					column: 1,
					text: '待收货',
					key: 'order_need_receive',
					img: `/static/images/user-3.png`,
					path: `order/order?current=${3}`,
					number: 0
				},
				{
					column: 1,
					text: '待评价',
					key: 'order_need_pingjia',
					img: `/static/images/user-4.png`,
					path: `order/order?current=${4}`,
					number: 0
				},
				{
					column: 1,
					text: '售后',
					key: 'order_need_refund',
					img: `/static/images/user-1001.png`,
					path: `order/shouhou`,
					number: 0
				},
				// 第二栏
				{
					column: 2,
					text: '领券中心',
					img: `/static/images/user-5.png`,
					path: `quan/quan`,
					number: 0
				},
				{
					column: 2,
					text: '我的优惠券',
					img: `/static/images/user-6.png`,
					key: 'yhq_num',
					path: `quan/yhquan`,
					number: 0
				},
				{
					column: 2,
					text: '我的地址',
					img: `/static/images/user-7.png`,
					path: `address/address`,
					number: 0
				},
				{
					column: 2,
					text: '我的评论',
					img: `/static/images/user-8.png`,
					path: `pingJia/pjList`,
					number: 0
				},
				// {
				// 	column: 2,
				// 	text: '意见反馈',
				// 	img: `/static/images/user-9.png`,
				// 	path: `yjFanKui/yjFanKui`,
				// 	number: 0
				// },
				{
					column: 2,
					text: '我的客服',
					img: `/static/images/user-10.png`,
					activeKey: 'kf',
					number: 0
				},
				{
					column: 2,
					text: '关于我们',
					img: `/static/images/user-11.png`,
					path: `article/article?id=${99}`,
					number: 0
				},
				{
					column: 2,
					text: '关注公众号',
					img: `/static/images/user-1101.png`,
					path: `article/gzharticle`,
					number: 0
				},
				// 我的团队
				{
					column: 3,
					text: '我的奖励',
					img: `/static/images/user-12.png`,
					path: `myyongjin/myyongjin`,
					number: 0
				},
				{
					column: 3,
					text: '我的股份',
					img: `/static/images/user-13.png`,
					path: `gufen/gufen`,
					number: 0
				},
				{
					column: 3,
					text: '推广订单',
					img: `/static/images/user-14.png`,
					path: `tgorder/tgorder`,
					number: 0
				},
				{
					column: 3,
					text: '我的粉丝',
					img: `/static/images/user-15.png`,
					path: `myfensi/myfensi`,
					number: 0
				},
				{
					column: 3,
					text: '邀请码',
					img: `/static/images/user-16.png`,
					number: 0,
					path: `user/myCode`
				}
			]
		};
	},
	computed: {
		...mapState(['config'])
	},
	onLoad() {},
	onShow() {
		get_userInfo((data) => {
			this.info = data;
			let numberKeys = ['order_need_pay', 'order_need_delivery', 'order_need_receive', 'order_need_pingjia', 'yhq_num','order_need_refund'];
			for (const key of numberKeys) {
				this.list.forEach((item, i) => {
					if (item.key && item.key === key) this.list[i].number = this.info[key];
				});
			}
		});
	},
	mounted() {},

	methods: {
		citem(e, item) {
			if (item.hasOwnProperty('path')) {
				this.toNav(item.path);
			}
			if(item.activeKey == 'kf'){
				this.showKeFu = true;
				return;
			}
		
		}
	}
};
</script>

<style lang="less" scoped>
@usercolor: @basecolor;
.user {
	position: relative;
	z-index: 1;
	&::before {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		content: '';
		width: 750rpx;
		height: 368rpx;
		background: linear-gradient(180deg, @usercolor 70%, rgba(7, 193, 96, 0) 100%);
	}

	.tbox {
		position: relative;
		height: 286rpx;
		overflow: hidden;

		.user-box {
			display: flex;
			padding: 64rpx 32rpx 0;
			.j-active();
			.avatar {
				width: 101rpx;
				height: 101rpx;
				border: 1rpx solid #eee;
				border-radius: 50%;
				background: #c7d9f8;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 32rpx;
				text:nth-of-type(1) {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #ffffff;
				}
				text:nth-of-type(2) {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
				}
				.mobile {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}
		}
		.vip-box {
			position: absolute;
			bottom: 0;
			box-shadow: 0px -3px 10rpx rgba(0, 0, 0, 0.25) inset;
			width: 100%;
			.vip-card {
				display: flex;
				align-items: center;
				width: 686rpx;
				height: 84rpx;
				margin: auto;
				padding: 0 24rpx;
				background: #1c1212;
				border-radius: 8rpx 8rpx 0rpx 0rpx;
				.lbox {
					flex: 1;
					display: flex;
					align-items: center;
					image {
						width: 31rpx;
						height: 27rpx;
						margin-right: 16rpx;
					}
					text {
						font-size: 24rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #ffd8a7;
					}
				}
				& > button {
					// display: inline-block;
					height: 40rpx;
					background: #ffd8a7;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					white-space: nowrap;
				}
			}
		}
	}
	.container {
		margin: 0 32rpx;
		padding: 16rpx 0;
		.card + .card {
		}
		.card {
			position: relative;
			z-index: 1;
			margin-top: 16rpx;
			padding: 26rpx 24rpx 0rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			// box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
			.head {
				.flex-between();
				text {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
				}
				.right {
					.flex-between();
					text {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
					image {
						width: 13rpx;
						height: 26rpx;
						margin-left: 24rpx;
					}
					.j-active();
				}
			}
			.content {
				.grid-item-box {
					.flex-center-y();
					padding: 26rpx 0;
					// .bor();
					image {
						width: 56rpx;
						height: 56rpx;
					}

					.text {
						flex: 1;
						width: 120rpx;
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #000000;
						text-align: center;
					}
				}
			}
		}
		.card-1 {
		}
		.card-2 {
			position: relative;
			width: 686rpx;
			min-height: 168rpx;
			margin-top: 16rpx;
		}
	}
.twomenu +.twomenu {
	margin-top: 18rpx;
}
	.twomenu {
		display: flex;
		.item + .item {
			margin-left: 18rpx;
		}
		.item {
			display: flex;
			align-items: center;
			flex: 1;
			width: 334rpx;
			height: 132rpx;
			padding: 24rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			// box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
			.j-active();
			.textbox {
				flex: 1;
				display: flex;
				flex-direction: column;

				text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #1c1212;
				}
				text:nth-of-type(2) {
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
			& > image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}
}
</style>
